<template>
	<view>
		<view class="bgc">
			<u-navbar
				title="信息确认"
				:titleStyle="titleStyle"
				:autoBack="true"
				bgColor="transparent"
				leftIconColor="#fff"
			/>
		</view>
		<view class="content">
			<view class="box">
				<view class="box_top">
					<view class="top_left">
						<view class="line"></view>
						<view>预定人信息</view>
					</view>
				</view>
				<view class="title">
					<view>预定人姓名</view>
					<u--input
						placeholder="请输入预定人姓名"
						border="none"
						v-model="form.reserve_people"
						:adjustPosition="false"
						inputAlign="right"
					></u--input>
				</view>
				<view class="title">
					<view>联系方式</view>
					<u--input
						placeholder="请输入联系方式"
						border="none"
						v-model="form.reserve_mobile"
						:adjustPosition="false"
						inputAlign="right"
					></u--input>
				</view>
				<view class="title" @click="timeShow = true">
					<view>预定时间</view>
					<u--input
						placeholder="请选择预定时间"
						disabled
						disabledColor="#fff"
						border="none"
						v-model="mealsTime"
						:adjustPosition="false"
						inputAlign="right"
					></u--input>
				</view>
				<u-datetime-picker
					:show="timeShow"
					@close="timeShow = false"
					@confirm="timeChange"
					@cancel="timeShow = false"
					closeOnClickOverlay
					v-model="value1"
					mode="datetime"
				></u-datetime-picker>
				<view class="title" v-if="item.type == '1'">
					<view>预定桌号</view>
					<u--input
						placeholder="请输入预定桌号"
						disabled
						disabledColor="#fff"
						border="none"
						v-model="item.table_num"
						:adjustPosition="false"
						inputAlign="right"
					></u--input>
				</view>
				<view class="title" v-if="item.type == '0'">
					<view>预定包厢</view>
					<u--input
						placeholder="请输入预定包厢"
						disabled
						disabledColor="#fff"
						border="none"
						v-model="item.box_name"
						:adjustPosition="false"
						inputAlign="right"
					></u--input>
				</view>
				<view class="title" @click="numShow = true">
					<view>人数</view>
					<u--input
						placeholder="请选择人数"
						disabled
						disabledColor="#fff"
						border="none"
						v-model="form.people"
						:adjustPosition="false"
						inputAlign="right"
					></u--input>
				</view>
				<view class="title">
					<view>备注</view>
					<u--input
						placeholder="请输入备注"
						border="none"
						v-model="form.remark"
						:adjustPosition="false"
						inputAlign="right"
					></u--input>
				</view>
				<u-button text="确定" shape="circle" :customStyle="btnStyle" @click="submit"></u-button>
			</view>
		</view>
		<u-action-sheet
			safeAreaInsetBottom
			:round="10"
			cancelText="取消"
			@select="event => (form.people = event.name)"
			@close="numShow = false"
			:actions="numList"
			:show="numShow"
		></u-action-sheet>
	</view>
</template>

<script>
import graceChecker from '@/mixins/formVerify.js';
export default {
	data() {
		return {
			titleStyle: {
				color: '#fff'
			},
			btnStyle: {
				background: 'linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 195, 0, 1) 100%)',
				width: '70%',
				margin: '50px auto',
				color: '#fff',
				border: 'none',
				height: '44px'
			},
			mealsTime: '', //时间
			form: {
				table_num: '', //桌号
				box_id: 0, //桌子的id
				shop_id: '', //店铺id
				reserve_people: '', //姓名
				reserve_mobile: '', //手机号
				mealsTime: '', //时间
				people: '', //人数
				remark: '', //备注
				type: '' //是直接点菜 还会预约
			},
			rule: {
				reserve_people: {
					type: String,
					required: true,
					message: '请输入预定人姓名'
				},
				reserve_mobile: {
					type: String,
					required: true,
					message: '请输入联系方式'
				},
				mealsTime: {
					type: String,
					required: true,
					message: '请选择预定时间'
				},
				people: {
					type: String,
					required: true,
					message: '请选择人数'
				},
				remark: {
					type: String,
					required: false,
					message: '请输入备注'
				}
			},
			item: {},
			timeShow: false,
			numShow: false,
			value1: Number(new Date()),
			numList: [
				{
					name: '1-4人'
				},
				{
					name: '5-8人'
				},
				{
					name: '9-12人'
				},
				{
					name: '13-16人'
				},
				{
					name: '16人以上'
				}
			]
		};
	},
	onLoad(event) {
		console.log(event, 'event');
		this.form.table_num = event.table_num;
		this.form.box_id = event.id;
		this.form.shop_id = event.shop_id;
		this.form.type = event.type;
		console.log(this.form, 'this.form');
	},
	methods: {
		submit() {
			let transit = graceChecker.RuleValidation(this.form, this.rule);
			if (transit) {
				if (!this.checkMobile(this.form.reserve_mobile)) return uni.$u.toast('手机号格式不正确');
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$http.post('wanlshop/reserve/shopReserveDetail', this.form).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.showModal({
							title: '提示',
							content: '是否现在点菜?',
							success: info => {
								if (info.confirm) {
									uni.$u.route({
										url: 'pagesA/my/orderDishes',
										type: 'redirectTo',
										params: {
											shop_id: res.data.reserveOrder.shop_id,
											reserve_id: res.data.reserveOrder.id,
											table_num: res.data.reserveOrder.num,
											// this.form.table_num = this.form.table_num;
											id: this.form.box_id,
											shop_id: this.form.shop_id,
											type: this.form.type
										}
									});
								} else if (info.cancel) {
									uni.$emit('updateList');
									uni.navigateBack();
								}
							}
						});
					}
				});
			}
		},
		timeChange(event) {
			this.timeShow = false;
			this.mealsTime = this.getTime(event.value);
			this.form.mealsTime = event.value / 1000;
		},
		getTime(date) {
			var date = new Date(date);
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return Y + M + D + h + m;
		}
	}
};
</script>
<style>
page {
	background: #f8f8fd;
}
</style>
<style lang="scss" scoped>
.bgc {
	background: #ffc003;
	height: 330rpx;
}

.content {
	padding: 20rpx;
	height: 300rpx;
	margin-top: -150rpx;

	.box {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;

		&_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.top_left {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #000;
				font-weight: bold;

				.line {
					width: 10rpx;
					height: 28rpx;
					border-radius: 100px;
					background: #ffc102;
					margin-right: 10rpx;
				}
			}
		}

		.title {
			padding: 30rpx 0rpx;
			border-bottom: 2rpx solid #f7f7f7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: 400;
			color: #000;
		}
	}
}
</style>
